<!--
 * @Author: your name
 * @Date: 2021-10-08 19:22:31
 * @LastEditTime: 2021-10-08 21:18:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\pages\connection\test2\father.vue
-->
<template>
  <div>
    <h1>provide / inject</h1>
    <h2>father</h2>
    <p>{{ counter }}</p>
    
    <a-button @click="befAdd">before-add</a-button>
    <p>{{ name }} -- {{ age }}</p>
    <Child />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Child from './child.vue'

export default {
  data () {
    return {
      counter: 12,
    }
  },
  provide () {
    return {
      name: 'Mike',
      age: 22,
      counter_pro: this.counter,
      newCounter: this.newCounter
    }
  },
  methods: {
    befAdd () {
      this.counter ++
    },
    newCounter () {
      return this.counter
    }
  },
  
  components: {
    Child
  }
}
</script>

<style>

</style>